<template>
  <div class="biz-container">
    <table-layout
      :haveSider="false"
      :isStandTable="false"
    >
      <template #headCustom>
        <a-steps
          :current="3"
          style="margin:10px 0"
          size="small"
        >
          <a-step title="完善配送商品明细" />
          <a-step title="完善发票" />
          <a-step title="完善配送单信息" />
          <a-step title="预览并提交" />
        </a-steps>
      </template>
      <template #form>
        <div class="card">
          <div class="viewTitle">
            {{btn[0].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,0)"
            >
              <a-icon
                v-if="btn[0].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <a-list-info
            v-if="btn[0].isUp"
            span="12"
            :infoDatas="infoDatas"
          />
        </div>
        <div class="dis"></div>
        <div class="card">
          <div class="viewTitle">
            {{btn[1].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,1)"
            >
              <a-icon
                v-if="btn[1].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <a-list-table
            v-if="btn[1].isUp"
            tableId="goodsTable"
            :columns="columns"
            :tableData="listdata"
            :haveChild="true"
            :pagination="pagination"
            :isSelecttion="false"
            :loading="loading"
            :scroll="{y:false}"
            :innerTable="innerTable"
          >
          </a-list-table>
        </div>
        <div class="dis"></div>
        <div class="card">
          <div class="viewTitle">
            {{btn[2].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,2)"
            >
              <a-icon
                v-if="btn[2].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <a-list-table
            v-if="btn[2].isUp"
            tableId="invoicesTable"
            :columns="columns2"
            :tableData="listdata2"
            :pagination="pagination2"
            :isSelecttion="false"
            :loading="loading"
            :scroll="{y:false}"
          >
          </a-list-table>
        </div>

        <div style="textAlign:center;lineHeight:60px">
          <a-button
            type="primary"
            @click="onPrevious"
          >上一步</a-button>
          <a-button
            type="primary"
            @click="onNext"
            style="marginLeft:20px"
          >提交</a-button>
        </div>
      </template>
    </table-layout>
  </div>
</template>

<script>
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import aListInfo from '@/views/app/biz/common/aListInfo'
import aListTable from '@/views/app/biz/common/aListTable'
import basicForm from '../common/basicForm'
import {
  getDetailByConditions,
  getDetailByConditionsCount,
} from '../saleOrder/saleOrder'


export default {
  components: {
    searchLayout,
    batchOperatBtn,
    tableLayout,
    aListInfo,
    aListTable,
    basicForm,
  },
  data () {
    return {
      btn: [
        { name: '配送单信息', isUp: true },
        { name: '配送单明细', isUp: true },
        { name: '发票信息', isUp: true }
      ],
      submitData: {},
      columns: [
        { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', align: 'center', },
        { title: '通用名', dataIndex: 'commonName', key: 'commonName', align: 'center' },
        { title: '生产企业名称', dataIndex: 'manufacturerZh', key: 'manufacturerZh', align: 'center', },
        { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' },
        { title: '型号', dataIndex: 'model', key: 'model', align: 'center' },
        { title: '计量单位', dataIndex: 'measurement', key: 'measurement', align: 'center' },
        { title: '需配送数量', dataIndex: 'num', key: 'num', align: 'center', scopedSlots: { customRender: 'num' } },
        { title: '单价(元)', dataIndex: 'iunitprice', key: 'iunitprice', align: 'center', scopedSlots: { customRender: 'iunitprice' } },
        { title: '配送数量', dataIndex: 'execNum', key: 'execNum', align: 'center', scopedSlots: { customRender: 'execNum' } },
        { title: '总价(元)', dataIndex: 'totalPrice', key: 'totalPrice', align: 'center', scopedSlots: { customRender: 'totalPrice' } },
        // { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' }},
      ],
      listdata: [],
      loading: false,
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 100000, //每页显示条数 pageSize
        total: 1,
        // showQuickJumper: true,
        // showSizeChanger: true,
        // pageSizeOptions: ['2', '10', '50', '100'],
      },
      innerTable: {
        innerColumns: [
          { title: '销售单号', dataIndex: 'saleOrderNo', key: 'saleOrderNo', align: 'center', },
          { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', align: 'center', },
          { title: '通用名', dataIndex: 'commonName', key: 'commonName', align: 'center' },
          // { title: '生产企业名称', dataIndex: 'manufacturerZh', key: 'manufacturerZh', align: 'center', },
          { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' },
          // { title: '型号', dataIndex: 'model', key: 'model', align: 'center' },
          { title: '计量单位', dataIndex: 'measurement', key: 'measurement', align: 'center' },
          { title: '需配送数量', dataIndex: 'num', key: 'num', align: 'center', scopedSlots: { customRender: 'num' } },
          { title: '单价(元)', dataIndex: 'iunitprice', key: 'iunitprice', align: 'center', scopedSlots: { customRender: 'iunitprice' } },
          { title: '批号', dataIndex: 'batchCode', key: 'batchCode', align: 'center', scopedSlots: { customRender: 'batchCode' } },
          { title: '配送数量', dataIndex: 'execNum', key: 'execNum', align: 'center', scopedSlots: { customRender: 'execNum' } },
          { title: '生产日期', dataIndex: 'productDate', key: 'productDate', align: 'center', scopedSlots: { customRender: 'productDate' } },
          { title: '有效期', dataIndex: 'expiryDate', key: 'expiryDate', align: 'center', scopedSlots: { customRender: 'expiryDate' } },
          // { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' }},
        ],
        innerLoading: false,
      },
      columns2: [
        // { title: '结算单号', dataIndex: 'settlementNo', key: 'settlementNo', align: 'center' },
        { title: '买方单位', dataIndex: 'customerName', key: 'customerName', align: 'center' },
        // { title: '关联销售订单', dataIndex: 'saleOrderNo', key: 'saleOrderNo', align: 'center' },
        // { title: '买方税号', dataIndex: 'customerTaxNo', key: 'customerTaxNo', align: 'center' },
        // { title: '买方地址电话', dataIndex: 'customerAddrTell', key: 'customerAddrTell', align: 'center' },
        // { title: '买方银行账号', dataIndex: 'customerAccountNum', key: 'customerAccountNum', align: 'center' },
        // { title: '开具单位', dataIndex: 'supplierOrgName', key: 'supplierOrgName', align: 'center' },
        // { title: '开具单位税号', dataIndex: 'supplierTaxNo', key: 'supplierTaxNo', align: 'center' },
        // { title: '开具单位地址电话', dataIndex: 'supplierAddrTel', key: 'supplierAddrTel', align: 'center' },
        // { title: '开具单位银行账号', dataIndex: 'supplierAccountNum', key: 'supplierAccountNum', align: 'center' },
        { title: '发票种类', dataIndex: 'invoiceType', key: 'invoiceType', align: 'center' },
        { title: '发票号码', dataIndex: 'invoiceNo', key: 'invoiceNo', align: 'center' },
        { title: '发票代码', dataIndex: 'invoiceCode', key: 'invoiceCode', align: 'center' },
        // { title: '红票标志', dataIndex: 'redFlag', key: 'redFlag', align: 'center' },
        // { title: '无税总价', dataIndex: 'totalIunitprice', key: 'totalIunitprice', align: 'center' },
        { title: '含税总价', dataIndex: 'totalPrice', key: 'totalPrice', align: 'center' },
        { title: '税率', dataIndex: 'tax', key: 'tax', align: 'center' , scopedSlots: { customRender: 'percentage' }},
        // { title: '税额', dataIndex: 'taxes', key: 'taxes', align: 'center' },
        { title: '状态', dataIndex: 'invoiceState', key: 'invoiceState', align: 'center' },
        // { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' }},
      ],
      listdata2: [],
      pagination2: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100'],
      },
      infoDatas: [
        { title: '配送单号', id: 'deliveryOrderNo', value: '', tips: '提交后系统自动生成' },
        { title: '配送单名称', id: 'deliveryOrderName', value: '' },
        { title: '送货类型', id: 'deliveryType', value: '' },
        { title: '寄件人姓名', id: 'sender', value: '' },
        { title: '寄件人联系电话', id: 'senderTel', value: '' },
        { title: '寄件人证件类型', id: 'senderCertificateType', value: '' },
        { title: '寄件人证件号码', id: 'senderCertificateNo', value: '' },
        { title: '收件人姓名', id: 'receiver', value: '' },
        { title: '收件人联系电话', id: 'receiverTel', value: '' },
        { title: '收件地址', id: 'receiverAddr', value: '' },
        { title: '状态', id: 'deliveryState', value: '' },
        { title: '物流关联单号', id: 'logisticsNo', value: '' },
        { title: '物流方', id: 'logistics', value: '' }
      ],
    }
  },
  computed: {},

  mounted () {

  },
  methods: {
    onNext () {
      this.$emit('onNextStep')
    },
    onPrevious () {
      this.$emit('onPrevious')
    },
    upAndDown (e, num) {
      if (this.btn[num].isUp) {
        this.btn[num].isUp = false
      } else {
        this.btn[num].isUp = true
      }
    },
    showView (submitData) {
      this.submitData = submitData
      this.listdata = submitData.deliveryOrderDetails
      this.listdata2 = submitData.invoices
      if (submitData.deliveryOrder) {
        for (const key in submitData.deliveryOrder) {
          for (const item of this.infoDatas) {
            if (key == item.id) {
              item.value = submitData.deliveryOrder[key]
            }
          }
        }
      }

    },
  },
}
</script>

<style>
.viewTitle {
  line-height: 30px;
  font-size: 16px;
  font-weight: bolder;
  color: #555;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}
.upAndDown {
  text-align: center;
}
.card {
  width: 100%;
  padding: 0 7px;
}
.dis {
  height: 15px;
  background-color: #f0f2f5;
}
</style>